<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>登录日志</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/mdui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/mdclub.css"/>
</head>

<div th:include="common/adheader::header"></div>
<div class="mdui-container mdui-p-x-2">
    <div class="mdui-table-fluid mc-datatable" id="table">
        <table class="mdui-table">
            <thead>
            <tr class="checked">
                <th style="width:200px;">时间</th>
                <th class="ip" style="width:200px;">IP</th>
                <th style="width:300px;">地址</th>
                <th class="actions">
                    <div class="mc-pagination">
                        <button mdui-menu="{target:'#pagination-setting-menu'}" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '分页设置'}"><i class="mdui-icon material-icons">more_vert</i></button>
                        <div class="mdui-menu menu" id="pagination-setting-menu">
                            <div class="label mdui-text-color-theme-secondary">每页显示行数
                            </div>
                            <div class="mdui-btn-group">
                                <button type="button" class="page mdui-btn mdui-text-color-theme-text">10</button>
                                <button type="button" class="page mdui-btn mdui-text-color-theme-text mdui-btn-active">25</button>
                                <button type="button" class="page mdui-btn mdui-text-color-theme-text">50</button>
                                <button type="button" class="page mdui-btn mdui-text-color-theme-text">100</button>
                            </div>
                        </div>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody class="mdui-typo">
            <tr v-for="access in accesses">
                <td style="width:200px;">{{createtime(access.createtime)}}</td>
                <td @click="getIpAddress(access.ip)" style="width:200px;"><code>{{access.ip}}</code></td>
                <td style="width:300px;">{{access.address}}</td>
                <!-- <td style="width:100px;"></td> -->
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:include="common/adfooter::footer"></div>
<script src="/js/sweetalert.min.js"></script>
<script>
    var table = new Vue({
        el: '#table',
        data: {
            accesses: []
        },
        methods: {
            createtime:function (time) {
                console.log(time)
                var datatime=new Date(time*1000);
                return datatime.toLocaleString();
            },
            getIpAddress: function(ip){
                swal("查询中......", ip , {
                    icon: "info",
                    buttons:false
                });
                fetch('/api/ip?ip='+ip)
                    .then(response => response.json())
                    .then(json => {
                        var code = json.code;
                        var msg = json.msg;
                        if(code === 20000){
                            swal(msg, json.data.province +" "+json.data.city, {
                                icon: "success",
                                buttons:false
                            });
                        }else{
                            swal(msg, ip , {
                                icon: "error",
                                buttons:false
                            });
                        }
                    });
            }
        },
        created (){
            fetch('/admin/adminlog')
                .then(response => response.json())
                .then(json => {
                    this.accesses = json.data;
                })
        }
    });

    $('.page').click(function(){
        var num = $(this).text();
        $(this).siblings('button').removeClass('mdui-btn-active');
        $(this).addClass('mdui-btn-active');
        fetch('/admin/getAccessInfo&num='+num)
            .then(response => response.json())
            .then(json => {
                table.accesses = json.data;
            });
    });

</script>